<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-01-21 14:38:26
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-01-27 11:14:21
-->
<template>
  <div>
    <div class="top">
      <el-radio v-model="cycleForm.type" label="1" @change="radioChange">
        按天
      </el-radio>
      <el-radio v-model="cycleForm.type" label="2" @change="radioChange">
        按周
      </el-radio>
      <el-radio v-model="cycleForm.type" label="3" @change="radioChange">
        按月
      </el-radio>
    </div>
    <div class="content">
      <el-form :model="cycleForm" ref="cycleForm" :rules="cycleRules">
        <div class="day" v-if="cycleForm.type == 1">
          <div class="dayNum">
            <span style="margin-right: 10px">每</span>
            <el-form-item prop="interval">
              <el-input-number
                :min="0"
                :max="31"
                v-model="cycleForm.interval"
              ></el-input-number>
            </el-form-item>

            <span style="margin-left: 10px">天</span>
          </div>
          <div class="dayTime">
            <span style="margin-right: 10px">从</span>
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="cycleForm.startTime"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>

            <span style="margin-left: 10px">开始执行</span>
          </div>
          <div class="skip">
            <el-checkbox
              label="跳过节假日"
              v-model="cycleForm.holiday"
              true-label="1"
              false-label="2"
            ></el-checkbox>
            <el-checkbox
              label="跳过周六"
              v-model="cycleForm.saturday"
              true-label="1"
              false-label="2"
            ></el-checkbox>
            <el-checkbox
              label="跳过周日"
              v-model="cycleForm.sunday"
              true-label="1"
              false-label="2"
            ></el-checkbox>
          </div>
          <div class="content-bottom" v-if="cycleForm.interval > 0">
            * 该任务将于每
            <span v-if="cycleForm.interval > 1">{{ cycleForm.interval }}</span
            >天自动创建
          </div>
        </div>
        <div class="week" v-else-if="cycleForm.type == 2">
          <div class="dayNum">
            <span style="margin-right: 10px">每</span>
            <el-form-item prop="interval">
              <el-input-number
                :min="0"
                :max="4"
                v-model="cycleForm.interval"
              ></el-input-number>
            </el-form-item>

            <span style="margin-left: 10px">周</span>
          </div>
          <el-form-item prop="dateArray">
            <el-checkbox-group
              v-model="cycleForm.dateArray"
              @change="weekChange"
              class="choiceDays"
            >
              <div
                class="specificDay"
                v-for="(item, index) in weekData"
                :key="index"
              >
                <el-checkbox :label="item.value">
                  {{ item.label }}
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </el-form-item>
          <div class="dayTime">
            <span style="margin-right: 10px">从</span>
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="cycleForm.startTime"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <span style="margin-left: 10px">开始执行</span>
          </div>
          <div class="skip">
            <el-checkbox
              label="跳过节假日"
              v-model="cycleForm.holiday"
              true-label="1"
              false-label="2"
            ></el-checkbox>
          </div>
          <div class="content-bottom" v-if="cycleForm.interval > 0">
            * 该任务将于每
            <span v-if="cycleForm.interval > 1">{{ cycleForm.interval }}</span>
            周的{{ specificStr }}自动创建
          </div>
        </div>
        <div class="year" v-else-if="cycleForm.type == 3">
          <div class="dayNum">
            <span style="margin-right: 10px">每</span>
            <el-form-item prop="interval">
              <el-input-number
                :min="0"
                :max="12"
                v-model="cycleForm.interval"
              ></el-input-number>
            </el-form-item>

            <span style="margin-left: 10px">月</span>
          </div>
          <el-form-item prop="dateArray">
            <el-checkbox-group
              v-model="cycleForm.dateArray"
              @change="mouthChange"
              class="choiceDays"
            >
              <div
                class="specificDay"
                v-for="(item, index) in yearData"
                :key="index"
              >
                <el-checkbox :label="item.value">
                  {{ item.label }}
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </el-form-item>

          <div class="dayTime">
            <span style="margin-right: 10px">从</span>
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="cycleForm.startTime"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <span style="margin-left: 10px">开始执行</span>
          </div>
          <div class="skip">
            <el-checkbox
              label="跳过节假日"
              v-model="cycleForm.holiday"
              true-label="1"
              false-label="2"
            ></el-checkbox>
            <el-checkbox
              label="跳过周六"
              v-model="cycleForm.saturday"
              true-label="1"
              false-label="2"
            ></el-checkbox>
            <el-checkbox
              label="跳过周日"
              v-model="cycleForm.sunday"
              true-label="1"
              false-label="2"
            ></el-checkbox>
          </div>
          <div class="content-bottom" v-if="cycleForm.interval > 0">
            * 该任务将于每
            <span v-if="cycleForm.interval > 1">{{ cycleForm.interval }}</span>
            月的{{ specificStr }}自动创建
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var interval = (rule, value, callback) => {
      if (value !== 0) {
        return callback();
      }
      callback(new Error("请输入具体数值"));
    };

    return {
      specificStr: "",
      weekData: [
        {
          value: "2",
          label: "一",
        },
        {
          value: "3",
          label: "二",
        },
        {
          value: "4",
          label: "三",
        },
        {
          value: "5",
          label: "四",
        },
        {
          value: "6",
          label: "五",
        },
        {
          value: "7",
          label: "六",
        },
        {
          value: "1",
          label: "七",
        },
      ],
      yearData: [
        { value: "0", label: 1 },
        { value: "1", label: 2 },
        { value: "2", label: 3 },
        { value: "3", label: 4 },
        { value: "4", label: 5 },
        { value: "5", label: 6 },
        { value: "6", label: 7 },
        { value: "7", label: 8 },
        { value: "8", label: 9 },
        { value: "9", label: 10 },
        { value: "10", label: 11 },
        { value: "11", label: 12 },
        { value: "12", label: 13 },
        { value: "13", label: 14 },
        { value: "14", label: 15 },
        { value: "15", label: 16 },
        { value: "16", label: 17 },
        { value: "17", label: 18 },
        { value: "18", label: 19 },
        { value: "19", label: 20 },
        { value: "20", label: 21 },
        { value: "21", label: 22 },
        { value: "22", label: 23 },
        { value: "23", label: 24 },
        { value: "24", label: 25 },
        { value: "25", label: 26 },
        { value: "26", label: 27 },
        { value: "27", label: 28 },
        { value: "28", label: 29 },
        { value: "29", label: 30 },
        { value: "30", label: 31 },
      ],
      cycleRules: {
        startTime: [
          {
            required: true,
            message: "请选择时间",
          },
        ],
        dateArray: [
          {
            required: true,
            message: "请选择具体天数",
          },
        ],
        interval: [{ required: true, validator: interval }],
      },
      cycleForm: {
        rule: "",
        dateArray: [],
        type: "1",
        interval: 0,
        startTime: "",
        holiday: "2",
        saturday: "2",
        sunday: "2",
      },
    };
  },
  methods: {
    // 每周规则变化
    weekChange(val) {
      this.cycleForm.rule = "";
      this.specificStr = "";
      val.forEach((item) => {
        if (item == 1) {
          this.specificStr += "周" + 7 + ",";
        } else {
          this.specificStr += "周" + (item - 1) + ",";
        }
      });
      this.specificStr = this.specificStr.substr(
        0,
        this.specificStr.length - 1
      );
    },
    // 每月规则变化
    mouthChange(val) {
      this.cycleForm.rule = "";
      this.specificStr = "";
      val.forEach((item) => {
        this.specificStr += item - -1 + ",";
      });
      this.specificStr = this.specificStr.substr(
        0,
        this.specificStr.length - 1
      );
    },
    reset() {
      this.specificStr = "";
      this.cycleForm.interval = 0;
      this.cycleForm.dateArray = [];
      this.cycleForm.startTime = "";
      this.cycleForm.holiday = "2";
      this.cycleForm.saturday = "2";
      this.cycleForm.sunday = "2";
    },
    radioChange(val) {
      // this.specificStr = "";
      // this.cycleForm.interval = 0;
      // this.cycleForm.startTime = "";
      // this.cycleForm.holiday = 2;
      // this.cycleForm.saturday = 2;
      // this.cycleForm.sunday = 2;
      this.reset();
      this.$refs.cycleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-form-item {
  margin-bottom: 0;
}
.content {
  margin-top: 20px;
  .dayTime {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  .skip {
    margin-top: 20px;
  }
  .choiceDays {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .specificDay {
      margin-right: 5px;
    }
  }
  .content-bottom {
    height: 20px;
    line-height: 20px;
    color: #2b2b2b;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ececec;
  }
}
.dayNum {
  height: 70px;
  display: flex;
  align-items: center;
}
</style>